<template>
  <div class="trainlistwrap">
    
    <ul>
     <!-- <router-link to="(path:'/orderlist',query:{id:'123'}})"></router-link> -->
      <li v-for="(ticket,index)  in tranlist"
          :key="index" @click="getorder(ticket.train_no)">
        <div class="trainlist">
          <div class="trainTime">
            <p>{{ticket.start_time}}</p>
            <i>{{ticket.start_station_type}}</i><em>{{ticket.start_station}}</em>
          </div>
          <div class="trainType">
            <p>{{ticket.train_no}}</p>
            <span>{{ticket.run_time}}</span>
          </div>
          <div class="trainTime">
            <p>{{ticket.end_time}}</p>
            <i>{{ticket.end_station_type}}</i><em>{{ticket.end_station}}</em>
          </div>
        </div>
        <!-- 作用域插槽 -->
        <slot name="seat" :priclist="ticket.price_list">
        </slot>
      </li>
     
    </ul>
  </div>

</template>

<script>
export default {
  name: 'Trainlist',
  data() {
    return {
      // city: [],
    };
  },
  props: {
    tranlist:{
      type:Array,
      default:[]
    }
  },
  components: {},
  methods: {
    // getorder(id){
    //   this.$router.push({
    //    // path:`/orderlist/${id}`,
    //    path:'/orderlist',
    //    query:{
    //     train:id
    //    }
    //   })
    // }
  },
  // mounted() {
  // },
  created() {
    console.log(this.$store.state.historyCity);
  },
};
</script>

<style lang='less' scoped>
.trainlistwrap {
  .notQueried {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    text-align: center;

    h1 {
      margin-top: 200px;
      padding: 10px;
      text-align: center;
      color: #e1e1e1;
    }
    img {
      width: 70%;
      height: 70%;
    }
  }
  ul {
    li {
      background-color: white;
      border-radius: 8px;
      width: 90%;
      padding: 10px;
      margin: 0px auto;
      margin-top: 16px;
    }
    .trainlist {
      display: flex;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
      .trainTime {
        p {
          font-size: 20px;
        }
        i {
          background-color: #1989fa;
          color: white;
          padding: 1px 2px;
          border-radius: 3px;
          font-size: 12px;
        }
        em {
          font-size: 12px;
          margin-left: 5px;
        }
      }
      .trainType {
        p {
          border-bottom: 1px solid #eee;
          text-align: center;
          color: #000;
          font-size: 18px;
        }
        span {
          color: #999;
          font-size: 10px;
        }
      }
      div:last-of-type i {
        background-color: green;
      }
    }
  }
}

</style>